<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
    html,
    body {
        width: 100%;
        min-height: 100%;
        background: #F3EFEE;
    }

    .aui-active .aui-bar-tab-label {
        color: #f5a51c
    }

    .login {
        height: 240px;
        background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
        /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
        position: relative;
    }

    .login .personal_logo {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        margin: 0 auto 9px;
        /*position: absolute; top: 60px; left: 20px;*/
    }

    .login .userinfo {
        position: absolute;
        top: 60px;
        text-align: center;
        left: 0;
        right: 0;
    }

    .login .userinfo .title {
        font-size: 0.8rem;
        color: #fff;
    }
    /* 设置条目 */

    .item {
        height: 3rem;
        line-height: 3rem;
        padding-left: 0.7rem;
        background-color: #fff;
    }

    .item_ico {
        float: left;
        width: 2.3rem;
        padding: 0.7rem 0.7rem 0.7rem 0;
    }

    .item_arrow {
        float: right;
        width: 1.5rem;
        padding: 1rem 0.7rem 1rem 0;
    }

    .item span {
        font-size: 0.7rem;
    }

    [v-cloak] {
        display: none;
    }

    .sbFlex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cenFlex {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .operationFooterBar {
        width: 100vw;
        height: 20vh;
        background: #f0f0f0;
        position: fixed;
        bottom: 0px;
        z-index: 33;
        transition: .3s linear;
    }

    .operationFooterBar_in_in {
        width: 60vw;
        height: 15vh;
    }

    .operationFooterBar_bottom {
        width: 100vw;
        height: 5vh;
        background: #fff;
    }

    .operationFooterBar_in_in_l {
        width: 100px;
        height: 15vh;
        flex-wrap: wrap;
    }

    .operationFooterBar_in_in_l_t {
        width: 5vh;
        height: 5vh;
        background: #fff;
    }

    .operationFooterBar_in_in_l_t img {
        width: 3vh;
        height: 3vh;
    }

    .operationFooterBar_in_in_l_b {
        width: 100% font-size:10px;
        margin-top: 5px;
        transform: scale(.8);
    }

    .goods_box {
        display: flex;
        flex-wrap: wrap;
    }

    .mengban {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 22;
        top: 0px;
        left: 0px;
        background: #000;
        opacity: .5;
    }

    .footdel_bar {
        height: 6vh;
        width: 100vw;
        background: #f0f0f0;
        display: flex;
        position: fixed;
        bottom: 0px;
    }

    .footdel_bar .footdel_barBtn {
        width: 25vw;
        min-width: 25vw;
        height: 100%;
        background-image: -webkit-linear-gradient(0deg, #fe7716, #ff0036);
        color: #fff;
    }

    .footdel_barBtn_l {
        border-top: 1px #b7b3b3 solid;
        width: 75vw;
        height: 100%;
        box-sizing: border-box;
    }

    .defind_circular,
    .defind_circularImg {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        overflow: hidden;
        left: 10px;
        top: 10px;
        z-index: 20;
    }

    .defind_circular {
        border: 1px #999 solid;
    }

    .defind_circularImg img {
        width: 100%;
        height: 100%;
    }
    .worpBox .contBox:nth-of-type(n+4) .imgBox {
      border-top: none !important;
    }
    .timeBox:last-of-type {
      margin-bottom: 7vh;
    }
    .contBox{
      border: 5px solid #F3EFEE;

    }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div class="user_nav_line"></div> -->
        <div class="aui-refresh-content">
            <div class="timeBox" v-for='(item,oi) in footerlist' v-if="item.data[0]">
                <div style="padding: 0.5rem 0.75rem;">{{item.time}}</div>
                <div class="aui-row worpBox">
                    <div class="aui-col-xs-4 contBox" style="box-sizing: border-box;background-color:#fff;position: relative;" v-for="(inItem,i) in item.data" v-if="inItem">
                        <div  @click="selectArr(inItem.goods_id,inItem.history_id,i,oi)" class="quan aui-hide">
                            <div class="defind_circular" v-if="!inItem.click && alldelFlag"></div>
                            <div class="defind_circularImg" v-if="inItem.click && alldelFlag">
                                <img src="../../image/four/success.png" alt="">
                            </div>
                        </div>
                        <div class="imgBox" style="border:1px solid #eee;border-left:none">
                            <div class=logoPic :style="'border-bottom:1px solid #eee;background:url('+inItem.logo_pic+') center center/cover no-repeat;'" @click="openWindow(inItem.goods_id,inItem.type)"></div>
                            <div class="aui-grid-label" style="display:flex;align-items:center;justify-content:space-around">
                                <div style="color:#f23030;">￥{{inItem.price}}</div>
                                <img src="../../image/my/m45.png" alt="" style="width:1rem;" :data-historyId="inItem.history_id" @click="historyBtn(inItem.history_id,i,oi)">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
            <!--弹框-->
        <div class="mengban" v-if="fiexdBottom == 0" @click="hideMenban"></div>
        <div class="operationFooterBar" :style="{bottom:fiexdBottom+'%'}">
            <div class="operationFooterBar_in cenFlex">
                <div class="operationFooterBar_in_in sbFlex">
                    <div class="operationFooterBar_in_in_l cenFlex" v-for="(item,i) in operationArr" @click="barClickBtn(i)">
                        <div>
                            <div class="operationFooterBar_in_in_l_t cenFlex">
                                <img :src="item.img" alt="" />
                            </div>
                            <div class="operationFooterBar_in_in_l_b cenFlex">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="operationFooterBar_bottom cenFlex" @click="hideMenban">取消</div>
        </div>
        <div class="footdel_bar aui-hide" v-if="alldelFlag">
            <div class="footdel_barBtn_l"></div>
            <div class="footdel_barBtn cenFlex" @click="delAllGoods()">删除</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-popup.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript">
var popup = new auiPopup();

function showPopup() {
    popup.show(document.getElementById("top-right"))
}
</script>
<script>
apiready = function() {


  var vm = new Vue({
        el: '#app',
        data: {
            footerlist: [],
            operationArr: [{
                name: '收藏',
                img: '../../image/my/collect.png'
            }, {
                name: '删除',
                img: '../../image/my/delete.png'
            }],
            fiexdBottom: -100,
            history_id: 0,
            oi: 0,
            history_ids: [],
            alldelFlag:true,
            page:1,
            totalpage:1
        },

        methods: {
          openWindow: function(id,type) {
            console.log(type)
            if(type!=3){
                  api.openWin({
                      name: 'commodity',
                      url: '../one_frame/commodity.html',
                      pageParam: {
                          name:'',
                          id: id
                      }
                  });
              }else{
                api.openWin({
                    name: 'commodity_convert',
                    url: '../one_frame/commodity_convert.html',
                    pageParam: {
                        name:'',
                        id: id
                    }
                })
              }
          },
            footerInfo:function(paging) {
                var $_this = this;
                api.ajax({
                    url: window.Url.Freeucenter_myFootprint,
                    method: 'post',
                    data: {
                        values: { token: $api.getStorage('token') || '', page:$_this.page } //键值对
                    }
                }, (ret, err) => {
                    console.log(JSON.stringify(ret))
                    if (ret.re == 1) {
                        // var list = paging == 1 || !paging ? [] : footerlist;
                        // var data = ret.data;
                        // if (data) {
                        //     data.list.map((item, i) => {
                        //         list.push(item)
                        //     })
                        // }

                        $_this.footerlist = ret.data.list;
                        $_this.totalpage = ret.data.sum_page

                        $_this.$nextTick(function () {
                          $('.logoPic').height($('.logoPic').width())
                        })
                    } else {

                    };
                });
            },
            barClickBtn:function(index) {
                console.log(index)
                if (index == 1) {
                    this.delGoodsID(this.history_id);
                }
            },
            delGoodsID:function(id) {
                api.ajax({
                    url: window.Url.Freeucenter_delFootprint,
                    method: 'post',
                    data: {
                        values: { token: $api.getStorage('token') || '', history_ids: id || '' } //键值对
                    }
                }, (ret, err) => {
                    if (ret.re == 1) {
                        $api.toast('删除成功', 500)
                        var footerlist = this.footerlist;
                        var history_ids = this.history_ids;
                        console.log(history_ids)
                        for (var id of history_ids) {
                            for (var i in footerlist) {
                                if (footerlist[i].data[0]) {
                                    for (var j in footerlist[i].data) {
                                        if (footerlist[i].data[j].history_id == id) footerlist[i].data.splice(j, 1)
                                    }
                                }
                            }
                        }
                        this.footerlist = footerlist;
                        this.history_ids = []
                        this.hideMenban()
                    } else {
                        $api.toast('删除失败', 500)
                        this.hideMenban()
                    };
                });
            },
            historyBtn:function(id, index, oi) {
                this.fiexdBottom = 0;
                this.history_id = id;
                this.history_index = index;
                this.oi = oi
            },
            hideMenban:function() {
                this.fiexdBottom = -100;
            },
            selectArr:function(goods_id, history_id, index, oi) {
                var history_ids = this.history_ids;
                this.footerlist[oi].data[index].click = this.footerlist[oi].data[index].click ? false : true;
                this.$set(this.footerlist, 0, this.footerlist[0])
                history_ids[index] = history_ids[index] ? '' : history_id;
                this.history_ids = history_ids
            },
            // 删除全部的商品ID
            delAllGoods:function() {
                var arr = []
                this.history_ids.map(item => {
                    item && arr.push(item)
                })
                var history_ids = arr.join('-');
                this.delGoodsID(history_ids)

            },
            //
            startDel:function() {
                api.addEventListener({
                    name: 'delll'
                }, (ret, err) => {
                    this.alldelFlag = this.alldelFlag?false:true;
                    console.log(this.alldelFlag)
                });

            }
        },
        mounted:function() {
            this.footerInfo();
            this.startDel();
              var $_this = this;
            //刷新
            var pullRefresh = new auiPullToRefresh({
                container: document.querySelector('.aui-refresh-content'),
                triggerDistance: 100
            }, function(ret) {

                if (ret.status == "success") {
                  api.ajax({
                      url: window.Url.Freeucenter_myFootprint,
                      method: 'post',
                      data: {
                          values: { token: $api.getStorage('token') || '', page: 1 } //键值对
                      }
                  }, function(ret, err){

                      if (ret.re == 1) {
                          var list = 1 == 1 || !paging ? [] : footerlist;
                          var data = ret.data;
                          if (data) {
                              data.list.map((item, i) => {
                                  list.push(item)
                              })
                          }
                          this.footerlist = list;
                          $_this.$nextTick(function () {
                            $('.logoPic').height($('.logoPic').width())
                          })
                      } else {

                      };
                      setTimeout(function() {
                          pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                      }, 500)
                  });
                }
            })
            var scroll = new auiScroll({
                listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
                distance:40 //判断到达底部的距离，isToBottom为true
            },function(ret){
                if (ret.isToBottom) {
                    $_this.page ++
                    if ($_this.page > $_this.totalpage) {
                        $_this.page = $_this.totalpage
                        return
                    }
                    api.ajax({
                        url:window.Url.Freeucenter_myFootprint,
                        method: 'post',
                        data: {
                            values: { token: $api.getStorage('token') || '', page:$_this.page} //键值对
                        },
                        timeout: 300,
                    }, function(ret, err) {
                        if (ret) {
                            //  api.alert({ msg: JSON.stringify(ret) });
                            $_this.footerlist = $_this.footerlist.concat(ret.data.list)
                            $_this.$nextTick(function () {
                              $('.logoPic').height($('.logoPic').width())
                            })
                        } else {
                            api.alert({ msg: JSON.stringify(err) });
                        }
                    })
                }
              })
        },
        filters: {}
    })
}

function remove_hide(){
  $('.quan').removeClass('aui-hide');
  $('.footdel_bar').removeClass('aui-hide');
}
function add_hide(){
  $('.quan').addClass('aui-hide');
  $('.footdel_bar').addClass('aui-hide');
}
</script>

</html>
